<template>
  <div class="equipment-container">
    <!-- 主要内容main -->
    <el-main v-show="true">
      <el-row :gutter="10">
        <!-- 左侧 -->
        <el-col :span="6" class="echarts_left"/>
        <!-- 主视觉 -->
        <el-col :span="12" class="main_view" >
          <div class="main-house">
            <el-select
              v-model="value"
              placeholder="请选择农场"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6" class="echarts_right" >
           <el-card style="max-width: 100%;height: 90%;">
            <template #header>
              <div class="card-header">
                <span>巡检概况</span>
              </div>
            </template>
            <div class="card-body" style="height: 180px">
              <dv-scroll-board 
                :config="config" 
                @mouseover="mouseoverHandler" 
                @click="clickHandler"
                style="margin-top: 10px;padding: 8px"
              />
            </div> 
            <div
              ref="eleMonthChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              style="padding:8px;height: 300px;margin-top: 20px;"
            >
            </div>
            <div
              ref="lineChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              style="padding:8px;height: 300px;margin-top: 20px;"
            >
            </div>

          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script setup name="Equipment">
// import useDictStore from "@/store/modules/dict";
// import ezuikit from "../../../../components/Ezuikit";
// import { listFault, produce, env, status } from "../../../../api/daping/device";

import * as echarts from "echarts";
import {
  onMounted,
  ref,
  watch,
  watchEffect,
  reactive,
  onUnmounted,
  computed,
} from "vue";

const router = useRouter();

/** getCurrentInstance使用注意点
 * getCurrentInstance 只能在 setup 或生命周期钩子中使用
 * getCurrentInstance线上环境报错问题: 使用proxy代替ctx,proxy线上不会出现问题
 * 在vue3中不推荐使用getCurrentInstance获取组件实例
 * 如果是获取dom大家可以通过ref获取
 * 至于其他的一些常用属性和方法，vue3中的setup中提供了props和contexts上下文
 */
const { proxy } = getCurrentInstance();

const value = ref('广兴01舍')

const options = [
  {
    value: 'Option1',
    label: '广兴01舍',
  },
  {
    value: 'Option2',
    label: '广兴02舍',
  },
  {
    value: 'Option3',
    label: '广兴03舍',
  },
  {
    value: 'Option4',
    label: '广兴04舍',
  },
  {
    value: 'Option5',
    label: '广兴05舍',
  },
]

const config = reactive({
  header: ['姓名', '巡检农舍', '巡检时间'],
  data: [
    ['广兴员工', 'gx001', '2025-03-15 15:36'],
    ['广兴员工', 'gx002', '2025-03-16 15:36'],
    ['广兴员工', 'gx003', '2025-03-17 15:36'],
    ['广兴员工', 'gx004', '2025-03-18 15:36'],
    ['广兴员工', 'gx005', '2025-03-19 15:36'],
    ['广兴员工', 'gx006', '2025-03-20 15:36'],
    ['广兴员工', 'gx007', '2025-03-21 15:36'],
    ['广兴员工', 'gx001', '2025-04-15 15:36'],
    ['广兴员工', 'gx003', '2025-04-27 15:36'],
    ['广兴员工', 'gx001', '2025-04-28 15:36'],
  ],
  index: false,
  columnWidth: [100,150,150],
  align: ['center'],
  oddRowBGC:['546FC6'],//奇数行颜色
  evenRowBGC:['#4263A8'],//偶数行颜色
})
const handleCommand =(command)=>{
  houseCurrent.value = command;
}
const mouseoverHandler =()=>{
  
}
const clickHandler =()=>{
  
}
const deviceIdList = [
  "1B0F0CD8-1231-467F-A2AF-7BD64C8D7F35",
  "60F78AD9-8CA7-4C91-835F-1F691F39D314",
  "29D8A8B3-AC58-43E5-ABB7-6E7275C91CC4",
  "720BC377-E871-456D-BC6C-FC8528FB895C",
];

const deviceId = ref(deviceIdList[0]);

const urlList = [
  "ezopen://open.ys7.com/L06779548/32.hd.live",
  "ezopen://open.ys7.com/L06779548/12.hd.live",
  "ezopen://open.ys7.com/L06779548/13.hd.live",
  "ezopen://open.ys7.com/L06779548/27.hd.live",
];

const componentKey = ref(0);

// const accessToken = ref(
//   JSON.parse(localStorage.getItem("access_token"))[1].value
// );
const url = ref(urlList[0]);

const houseCurrent = ref("10#");

const fullscreenLoading = ref(false);

const hkChartRef = ref(null);
const scaleRef = ref(null);
const eleMonthChartRef = ref(null);//柱状图
const lineChartRef = ref(null);//折线图

// 计算总和的函数
const calculateTotal = (data) => {
  return data.reduce((acc, val) => acc + val, 0);
};
// 柱状图
const eleMonthData = {
  time: ["001舍", "002舍", "003舍", "广兴1舍", "广兴2舍", "广兴3舍"],
  data1: [15, 19, 24, 45, 32, 42],
};

const drawEleMonthChart = () => {
  const total = calculateTotal(eleMonthData.data1); // 计算总和
  const option = {
    title: {
      text: "(单位: 个)",
      textStyle: {
        color: "#fff",
        fontSize: 10,
      },
    },
    tooltip: {
      show: true,
      trigger: 'item',
    },
    grid: {
      top: 40,
      left: 30,
      right: 30,
      bottom: 20,
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: eleMonthData.time,
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff', // 修改为白色以确保可读性
          fontSize: 12,
          formatter: function (params) {
            let str = "";                
            const paramsLen = params.length;
            const len = 5;                  
            const rowNumber = Math.ceil(paramsLen / len);
            if (paramsLen > len) {
              for (let i = 0; i < rowNumber; i++) {
                const start = i * len;      
                const end = start + len;    
                if (i === rowNumber - 1) {
                  str += params.substring(start, paramsLen);
                } else {
                  str += params.substring(start, end) + "\n";
                }
              }
            } else {
              str = params;
            }
            return str;                   
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(133, 189, 254, 1)',
            type: 'dashed',
          },
        },
        show: true,
      },
    ],
    series: [
      {
        name: '巡检个数',
        type: 'bar',
        barMaxWidth: 18,
        zlevel: 10,
        data: eleMonthData.data1,
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(31, 129, 255, 1)',
              }, {
                offset: 1,
                color: 'rgba(31, 134, 255, 0)',
              }],
            },
            barBorderRadius: [30, 30, 0, 0],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(31, 129, 255, 1)',
                fontSize: 12,
                fontWeight: 400,
              },
            },
          },
        },
      },
    ],
    graphic: [
      {
        type: 'text',
        right: '5%',
        top: '4%',
        style: {
          text: `巡检设备数: ${total} 个`, // 显示总和
          fill: '#ffffff', // 字体颜色
          font: 'bold 14px sans-serif',
        },
      },
    ],
  };

  const eleMonthChartInstance = echarts.init(eleMonthChartRef.value);
  eleMonthChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    eleMonthChartInstance.resize();
  });
};

// 折线图
const lineData = {
  time: ["001舍", "002舍", "003舍", "广兴1舍", "广兴2舍", "广兴3舍"],
  data1: [1, 2, 0, 1, 1, 0],
};
const drawLineChart = () => {
  const total = calculateTotal(lineData.data1); // 计算总和
  const option = {
    title: {
      text: "(单位: 个)",
      textStyle: {
        color: "#fff",
        fontSize: 10,
      },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255,255,255,.05)',
      borderWidth: '1',
      borderColor: 'rgba(255,255,255,0.25)',
      extraCssText: 'backdrop-filter: blur(5px);',
      textStyle: {
        fontSize: 18,
        color: '#ffffff'
      }
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
         textStyle: {
            color: '#C5D6E6'
         }
      },
      axisLine: {
         lineStyle: {
            color: '#D9E7FF'
         }
      },
      data: lineData.time
    },
    yAxis: {
      type: 'value',
      axisLabel: {
         textStyle: {
            color: '#C5D6E6'
         }
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(217,231,255,0.3)'
         }
      }
    },
    series: [
      {
         data: lineData.data1,
         type: 'line',
         lineStyle: {
            color: '#FFD03B'
         },
         symbol: 'circle',
         symbolSize: 6,
         itemStyle: {
            color: '#F5CD66',
            borderColor: 'rgba(245,205,102,0.4)',
            borderWidth: 12
         }
      }
    ],
    graphic: [
      {
        type: 'text',
        right: '5%',
        top: '4%',
        style: {
          text: `巡检发现异常设备数: ${total} 个`, // 显示总和
          fill: '#ffffff', // 字体颜色
          font: 'bold 14px sans-serif',
        },
      },
    ],
  };

  const lineChartInstance = echarts.init(lineChartRef.value);
  lineChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    lineChartInstance.resize();
  });
};




onMounted(() => {
  drawEleMonthChart();
  drawLineChart()
});

// 使用 watchEffect 来响应数据的变化
watchEffect(() => {});
</script>

<style scope lang="scss">
.equipment-container {
  height: 87%;
  width: 100%;
  .el-main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    // background-color: yellow;
    padding: 15px;
    .el-row {
      height: 100%;
    }
    .el-card {
      color: #fff;
      // height: 100%;
      background: linear-gradient(
        180deg,
        #001e54 0%,
        rgba(4, 51, 132, 0.29) 100%
      );
      .el-card__header {
        padding: 0 !important;
        min-height: 28px;
        .card-header {
          font-size: 20px;
          color: #1890FF;
          min-height: 36px;
          padding: 0 0 0 16px;
          display: flex;
          align-items: center;
        }
      }
      .el-card__body {
        padding: 0 !important;
        // height: calc(100% - 28px);
        min-height: calc(100% - 28px);
        .card-body {
          height: 100%;
          .status-item {
            height: 280px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
          }
          .statusRing {
            width: 100px;
            height: 100px;
            // line-height: 50px;
            background: url("../../../../assets/images/ring.png") no-repeat
              center;
            background-size: 100% 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .statusInfo {
            padding: 10px 4px;
            border-radius: 6px;
            background-color: #001e54;
            display: flex;
            flex-direction: column;
            width: 100px;
            gap: 10px;
            .info-item {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              i,
              span {
                width: 33.33%;
                text-align: center;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .main_view {
      margin-top: 10px;
      .main-house{
        background-color: skyblue;
        margin: 0 40%;
      }

      .cont-list {
        display: flex;
        background: rgba(36, 54, 111, 0.9);
        box-shadow: 0 4px 10px #0000001d;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        position: relative;
        .cont-item {
          display: flex;
          .cont-item-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
              width: 44px;
              height: 44px;
              object-fit: contain;
            }
            span {
              font-size: 18px;
              font-weight: 500;
              color: #fff;
              line-height: 25px;
            }
          }
          .cont-item-right {
            padding-left: 20px;
            .day {
              font-size: 22px;
              font-weight: 700;
              color: #fff;
              line-height: 26px;
            }
            .data {
              font-size: 32px;
              font-weight: 700;
              color: #fff;
              line-height: 33px;
              padding-top: 10px;
            }
            .unit {
              font-size: 22px;
              font-weight: 600;
              color: #b6c1c4;
              line-height: 26px;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .echarts_right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 3s linear infinite;
}
</style>
